<template>
  <a-spin :spinning="loading">
    <a-card :bordered="false" class="mapBox">
      <div class="mapCus">
        <a-button style="margin-bottom: 8px" @click="ProvincesClick('此区域全部客户列表', null)"
          >此区域客户总数: {{ RegionsAllCount }}
        </a-button>
        <br />
        <a-button style="margin-bottom: 8px" @click="ProvincesClick('此区域已维护客户列表', '1')"
          >已维护客户总数: {{ RegionsExistAddressCount }}
        </a-button>
        <br />
        <a-button @click="ProvincesClick('此区域待维护客户列表', '2')"
          >待维护客户总数: {{ RegionsNoExistAddressCount }}</a-button
        >
      </div>
      <a-button class="mapBtn" v-if="!isReturnChina" type="primary" icon="redo" @click="getDataList()">刷新</a-button>
      <!--<a-button class="mapBtn" v-else type="primary" @click="ProvincesClick(null,null)">本省/市客户</a-button>-->
      <div class="echartsGroup">
        <!-- 返回中国地图 -->
        <div class="button" v-show="isReturnChina" @click="returnChinaFn()">返回中国地图</div>
        <!-- echarts 图表 -->
        <div ref="china_map" style="height: 100%; width: 100%"></div>
      </div>
      <view-form ref="viewForm" :parentObj="this" @MapEdit="MapEdit"></view-form>
    </a-card>
  </a-spin>
</template>

<script>
import ViewForm from './ViewForm.vue'
import 'echarts/map/js/china.js' // 核心文件
require('echarts/theme/macarons') //
export default {
  components: { ViewForm },
  data() {
    return {
      mapData: [
        // 自己做的模拟数据 后续根据业务展示
        // { name: '湖北', value: 88 },
      ],
      provinces: {
        // 数据
        台湾: 'taiwan',
        河北: 'hebei',
        山西: 'shanxi',
        辽宁: 'liaoning',
        吉林: 'jilin',
        黑龙江: 'heilongjiang',
        江苏: 'jiangsu',
        浙江: 'zhejiang',
        安徽: 'anhui',
        福建: 'fujian',
        江西: 'jiangxi',
        山东: 'shandong',
        河南: 'henan',
        湖北: 'hubei',
        湖南: 'hunan',
        广东: 'guangdong',
        海南: 'hainan',
        四川: 'sichuan',
        贵州: 'guizhou',
        云南: 'yunnan',
        陕西: 'shanxi1',
        甘肃: 'gansu',
        青海: 'qinghai',
        新疆: 'xinjiang',
        广西: 'guangxi',
        内蒙古: 'neimenggu',
        宁夏: 'ningxia',
        西藏: 'xizang',
        北京: 'beijing',
        天津: 'tianjin',
        上海: 'shanghai',
        重庆: 'chongqing',
        香港: 'xianggang',
        澳门: 'aomen',
      },
      isReturnChina: false, // 是否显示返回中国地图
      options: null, // echarts 存数据
      mapDataShow: [],
      eData: [],
      ProvincesName: '',
      ProvincesId: '',
      loading: false,
      RegionsAllCount: 0,
      RegionsExistAddressCount: 0,
      RegionsNoExistAddressCount: 0,
      mapRegions: {},
      Level: 0,
      AreaType: null,
      params: {},
    }
  },
  mounted() {
    this.returnChinaFn()
  },
  methods: {
    MapEdit() {
      if (this.isReturnChina) this.getCityList(this.params)
      else this.getDataList()
    },
    // 省市按钮
    ProvincesClick(title, IsExistAddress) {
      this.$refs.viewForm.openForm(
        this.ProvincesId,
        title || this.ProvincesName + '客户列表',
        this.AreaType,
        IsExistAddress,
        this.Level
      )
    },
    // 中国地图点击省份 显示当前省份的详细的地区。
    chinaMapHidden(chinaMap) {
      const that = this
      chinaMap.off('click')
      chinaMap.on('click', async function (params) {
        if (!params.data) return that.$message.error('当前地区暂无数据')
        // 是否为点击省份
        if (params.name in that.provinces) {
          that.ProvincesName = params.name
          that.ProvincesId = params.data.Id
          that.Level = 1
          that.AreaType = '省份'
          const s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`)
          if (s) {
            that.params = params
            // 获取市级信息
            that.getCityList(params)
          }
        } else {
          that.$refs.viewForm.openForm(params.data.Id, params.name, that.Level)
        }
      })
    },
    // 渲染地图
    chinaMaprsult(name = null, mapData, eData) {
      const _this = this
      name == 'china' ? (this.isReturnChina = false) : (this.isReturnChina = true)
      const chinaMap = this.$echarts.init(this.$refs.china_map)
      this.options = {
        // 点击触发
        // tooltip: {
        //   trigger: 'item',
        //   triggerOn: 'click',
        //   // 鼠标移到图里面的浮动提示框
        //   formatter: function (params) {
        //     var name = params.name
        //     var toolipData = []
        //     _this.provinceData.forEach((item) => {
        //       if (name == item.name) {
        //         toolipData = item.children
        //       }
        //     })
        //     var htmlStr = ''
        //     toolipData.forEach((item) => {
        //       htmlStr += `<li class="list-li" name="${item.cCusName}"><div οnclick="clickRoute()" >${item.cCusName}</div></li>`
        //     })
        //     return `<div class="list-wrap"><div class="list-title">${name}</div>${
        //       htmlStr.length > 0 ? `<ul class="list-ul">${htmlStr}</ul>` : ''
        //     }</div>`
        //   },
        // },
        tooltip: {
          formatter: function (params) {
            return params.name
          },
        },
        visualMap: {
          // 左下角展示
          show: true,
          min: 0,
          max: 100,
          left: 10,
          bottom: 170,
          showLabel: true,
          textStyle: {
            color: '#000',
          },
          inRange: {
            color: ['#e0ffff', '#3a41ff'], // 取值范围的颜色
          },
        },
        geo: {
          map: name || 'china', // 核心
          roam: false,
          label: {
            // 页面初始化加载的文字
            normal: {
              show: true,
              textStyle: {
                color: '#777', // 页面初始化的地图文字颜色
                fontSize: 12, // // 页面初始化的地图文字大小
              },
            },
          },
          itemStyle: {
            // 设置样式
            normal: {
              borderWidth: 0.5, // 区域边框宽度
              borderColor: 'rgba(119, 156, 255, 1)',
              // areaColor: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: '#073684', // 0% 处的颜色
              //     },
              //     {
              //       offset: 1,
              //       color: '#061E3D', // 100% 处的颜色
              //     },
              //   ],
              // },
            },
            emphasis: {
              // 移入背景颜色
              // areaColor: '#ff00ff',
              areaColor: '#F9D92E',
              show: true,
              textStyle: {
                color: '#000',
                fontSize: '12px',
              },
            },
          },
        },
        // 地图
        series: [
          {
            type: 'map',
            geoIndex: 0,
            color: '#000',
            itemStyle: {
              // 地图区域的多边形 图形样式
              normal: {
                // 是图形在默认状态下的样式
                label: {
                  show: true, // 是否显示标签
                  textStyle: {
                    color: 'black',
                  },
                },
              },
              zoom: 1, // 地图缩放比例,默认为1
              emphasis: {
                // 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: { show: true },
              },
            },
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: { color: '#696969' }, // 省份标签字体颜色
              },
              emphasis: {
                show: true,
                textStyle: {},
              },
            },
            data: mapData,
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'fill',
              scale: 3,
            },
            showEffectOn: 'render',
            itemStyle: {
              color: '#f0f',
            },
            label: {
              normal: {
                show: true,
                color: '#081727', // 字体颜色
                position: 'inside',
                padding: [0, 0, 0, 0],
                verticalAlign: 'middle',
                formatter: function (para) {
                  return para.data.num
                },
              },
            },
            symbol: 'circle',
            // symbolRotate: 20,
            symbolSize: [15, 15],
            data: eData,
            // zlevel: 1,
          },
        ],
      }
      chinaMap.setOption(this.options)
      this.chinaMapHidden(chinaMap)
    },
    // 返回中国地图
    returnChinaFn() {
      this.Level = 0
      this.AreaType = null
      this.ProvincesId = ''
      // 获取数据  处理数据
      if (this.mapData.length <= 0) {
        this.getDataList()
      } else {
        this.getData()
      }
    },
    getCityList(params) {
      this.$http
        .post('/CustomerManagement/CustomerInfo/GetDataListAsyncForMap', {
          Level: '1',
          Conditions: [
            {
              Condition: 'ParentId',
              Keyword: params.data.Id,
            },
          ],
        })
        .then((res) => {
          if (res.Success) {
            this.RegionsAllCount = res.Data.RegionsAllCount
            this.RegionsExistAddressCount = res.Data.RegionsExistAddressCount
            this.RegionsNoExistAddressCount = res.Data.RegionsNoExistAddressCount
            this.mapDataShow = res.Data.CustInfoFMList
            this.eData = this.mapDataShow.map((item) => ({
              name: item.name,
              value: [item.Longitude, item.Latitude],
              num: item.value,
              visualMap: false,
              Id: item.Id,
            }))
            this.chinaMaprsult(params.name, this.mapDataShow, this.eData)
          }
        })
    },
    getDataList() {
      this.loading = true
      this.Level = 0
      this.AreaType = null
      this.ProvincesId = ''
      this.$http
        .post('/CustomerManagement/CustomerInfo/GetDataListAsyncForMap', {
          Level: '0',
        })
        .then((res) => {
          this.loading = false
          if (res.Success) {
            this.mapData = res.Data.CustInfoFMList
            this.mapRegions = {
              RegionsAllCount: res.Data.RegionsAllCount,
              RegionsExistAddressCount: res.Data.RegionsExistAddressCount,
              RegionsNoExistAddressCount: res.Data.RegionsNoExistAddressCount,
            }
            this.RegionsAllCount = this.mapRegions.RegionsAllCount
            this.RegionsExistAddressCount = this.mapRegions.RegionsExistAddressCount
            this.RegionsNoExistAddressCount = this.mapRegions.RegionsNoExistAddressCount
            this.getData()
          }
        })
    },
    getData() {
      // 左上客户数据
      this.RegionsAllCount = this.mapRegions.RegionsAllCount
      this.RegionsExistAddressCount = this.mapRegions.RegionsExistAddressCount
      this.RegionsNoExistAddressCount = this.mapRegions.RegionsNoExistAddressCount
      // 中国地图
      const mapData = this.mapData
      const eData = mapData.map((item) => ({
        name: item.name,
        value: [item.Longitude, item.Latitude],
        num: item.value,
        visualMap: false,
        Id: item.Id,
      }))
      window.clickRoute = this.clickRoute
      this.$nextTick((_) => {
        this.chinaMaprsult('china', mapData, eData)
      })
    },
    // 点击跳转页面
    clickRoute() {
      alert('点击了,做其他操作!')
    },
  },
}
</script>
<style>
.mapCus {
  position: absolute;
  top: 10px;
  left: 10px;
}

.echartsGroup {
  top: -110px;
  width: 1050px;
  height: 1050px;
  position: relative;
}

.echartsGroup .button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  position: absolute;
  top: 170px;
  left: 10px;
  z-index: 99;
}

.list-ul {
  list-style: none;
  margin-left: -20px;
}

.list-li {
  pointer-events: all;
  cursor: pointer;
}

.mapBox {
  overflow: hidden;
  height: 900px;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.mapBtn {
  position: absolute;
  right: 30px;
}
</style>
